import {
    PreloadedQuery,
    useQueryLoader,
    usePreloadedQuery
} from 'react-relay/hooks';
//import graphql from 'babel-plugin-relay/macro';
import React from 'react';
import * as TestRootIssuesQuery from "./__generated__/TestRootIssuesQuery.graphql";
import Link from "../routing/Link";

const graphql = require("babel-plugin-relay/macro");
const TestQuery3 = require('./__generated__/TestRootIssuesQuery.graphql');
const TestRootIssuesQuery2 = require('./__generated__/TestRootIssuesQuery.graphql');

const { Suspense } = React;

interface Props {
    prepared: {
        //若是路由配置多个loadQuery提前加载，那么graphql也是分开的请求包,要独立为多次发送后端的。
        issuesQuery: PreloadedQuery<TestRootIssuesQuery.TestRootIssuesQuery>;
        testQuery9: PreloadedQuery<TestRootIssuesQuery.TestRootIssuesQuery>;
    }
    children: React.ReactNode;
}

export default function Test(props: Props) {
    //第二个返回值loadQuery是回调(variables: VariablesOf<TQuery>, options?: UseQueryLoaderLoadQueryOptions) => void
    //第二个参数的类型必须完全一致！useQueryLoader与usePreloadedQuery保持一致类型？？

    const [queryReference, loadQuery] = useQueryLoader(
        TestQuery3  //GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
          //PreloadedQuery<TQuery> | null,  provided by router
    );
    //第二个参数的： props.prepared.issuesQuery,
    //引入Relay思路大变：没有数据就没有页面展示，若需默认展示就必须提供缺省参数来准备好数据后才能执行页面显示代码。
    return (<>
        <button
            onClick={() => loadQuery({
                id: '4',
                username: 'herzhang'
            })}
        >
            loadQuery揭示装载子页面!
        </button><p>Test主页面</p>
        {props.children}
            <p>Test主页面</p>
        <Suspense fallback="Loading...">
            {queryReference != null
                ? <NameDisplay queryReference={queryReference} />
                : null
            }
             <p>Test主页面</p>
            <Link to={`/test/remod`}>3442是啥bbb</Link> <p></p>
            <Link to={`/test/old`}>未任务cghfc</Link>
        </Suspense>
    </>
    );
}

/* **
queryReference: PreloadedQuery<TestRootIssuesQuery.TestRootIssuesQuery>;
* */
interface NameDisplayProps {
    queryReference: any;
    //children: React.ReactNode;
}
//从服务端取得的每个实体模型id都不允许相等的！Relay报错; $globalId = base64("$ObjectName:$ObjectPK").
function NameDisplay({ queryReference }:NameDisplayProps)
{
    //const data = usePreloadedQuery<TestQuery>(TestQuery, queryReference);
    //graphql``语法体usePreloadedQuery定义多个query；报错！BabelPluginRelay: Expected exactly one definition per graphql tag.
    const data = usePreloadedQuery<typeof TestRootIssuesQuery2>(
        graphql`
            query TestRootIssuesQuery($id: ID!,$username: String!) {
                getDeviceSelf(id: $id) {
                    id oid cod
                }
                findUserLike(username: $username) {
                    id username dep{id name}
                }
            }
        `,
        queryReference,
    );
    const { getDeviceSelf, findUserLike}=data;
    console.log("NameDisplay 目前data=",data);
    return (
        <div>
            <p>usePreloadedQuery页面NameDisplay</p>
            <Suspense fallback={'Loading...'}>
                <h1>{getDeviceSelf?.id}= {getDeviceSelf?.oid} this Test ing： {getDeviceSelf?.cod}:: {findUserLike[0].username}</h1>
            </Suspense>
        </div>
    );
}


//ID一样的:报错RelayResponseNormalizer: Invalid record `1`. Expected __typename to be consistent, but the record was assigned conflicting types `User` and `Division`. The GraphQL server likely violated the globally unique id requirement by returning the same id for different objects.
